<template>
	<view class="container p-bottom" v-if="goods_list.length">
		<view @tap="onSelectAddress" class="flow-delivery">
			<view class="flow-delivery__detail dis-flex flex-y-center">
				<view class="detail-location dis-flex"><text class="suifont sui-dingwei"></text></view>
				<view class="detail-content flex-box">
					<template v-if="address.address_id">
						<view class="detail-content__title dis-flex">
							<text class="f-30">{{ address.name }}</text>
							<text class="detail-content__title-phone f-28">{{ address.phone }}</text>
						</view>
						<view class="detail-content__describe">
							<text class="col-7">{{ address.region.province }} {{ address.region.city }} {{ address.region.region }} {{ address.detail }}</text>
						</view>
					</template>
					<view v-else class="detail-content__describe dis-flex"><text class="col-6">请选择配送地址</text></view>
				</view>
				<view class="detail-arrow dis-flex"><text class="suifont sui-xiangyoujiantou user-orderJtou"></text></view>
			</view>
		</view>

		<view class="m-top20">
			<view class="checkout_list" v-for="(item, index) in goods_list" :key="index">
				<view class="flow-shopList dis-flex" :data-index="index">
					<!-- 商品图片 -->
					<view class="flow-list-left"><image mode="scaleToFill" :src="item.goods_image"></image></view>
					<view class="flow-list-right flex-box">
						<!-- 商品名称 -->
						<text class="f-30 col-3 twolist-hidden">{{ item.goods_name }}</text>
						<!-- 商品sku信息 -->
						<text class="f-24 col-7">{{ item.goods_sku.goods_attr }}</text>
						<!-- 商品数量和单价 -->
						<view class="flow-list-cont dis-flex flex-x-between flex-y-center">
							<text class="small">×{{ item.total_num }}</text>
							<text class="flow-cont" :class="{ 'price-delete': item.is_user_grade }">积分：{{ item.goods_price }}</text>
						</view>
					</view>
				</view>
			</view>
			<!-- 提交订单 -->
			<view class="flow-fixed-footer b-f m-top10">
				<view class="dis-flex chackout-box">
					<view class="chackout-left pl-12">
						共需积分：
						<text class="col-m">{{ order_pay_price }}</text>
					</view>
					<view @tap="onSubmitOrder" class="chackout-right"><text class="flow-btn f-32">确认兑换</text></view>
				</view>
			</view>
		</view>
		<custom-dialog ref="pointDialog"></custom-dialog>
	</view>
</template>

<script>
// 枚举类：支付方式
import PayTypeEnum from '@/utils/enum/order/PayType';
import Tools from '@/utils/Tools.js';
import popup from '@/components/popup/index.vue';
// import vanSwitch from '@/components/switch/index.vue';
import Payment from '@/utils/Payment.js';

import customDialog from '@/components/dialog/index.vue';
import Dialog from '@/components/dialog/dialog.js';
import { HTML_DOMAIN } from '@/constant/Config.js';
export default {
	components: {
		popup,
		customDialog
		// switch
	},
	data() {
		return {
			selectedShopId: '',
			isShowTab: true,
			PayTypeEnum,
			curPayType: PayTypeEnum.BALANCE.value,
			curDelivery: 10,
			address: {
				address_id: null
			},
			options: {},
			goods_list: [],
			order_total_num: 0,
			order_total_price: 0,
			coupon_money: '',
			coupon_list: [],
			is_allow_points: false,
			setting: {},
			points_money: 0,
			remark: '',
			order_pay_price: 0,
			showBottomPopup: false,
			disabled: false,
			coupon_id: 0,
			isUsePoints: false,
			extract_shop: {},
			linkman: '',
			phone: '',
			paymentChannel: {
				WECHAT: false,
				ALIPAY: false,
				BALANCE: false
			},
			exist_address: false,
			authId: null
		};
	},
	onLoad(options) {
		this.options = options;

		this.$u.api.getPaymentList('order').then(res => {
			const paymentList = res.data.list;
			if (paymentList.length == 0) {
				Tools.showError('不支持任何支付方式', () => {
					this.closePayment();
				});
			} else {
				this.curPayType = paymentList[0].pay_code;
				for (let i = 0; i < paymentList.length; i++) {
					switch (paymentList[i].pay_code) {
						case 10:
							this.$set(this.paymentChannel, 'WECHAT', true);
							break;
						case 20:
							this.$set(this.paymentChannel, 'ALIPAY', true);
							break;
						case 30:
							this.$set(this.paymentChannel, 'BALANCE', true);
							break;
						default:
							break;
					}
				}
			}
		});
	},
	onShow() {
		this.getOrderData();
	},
	onUnload() {},
	methods: {
		/**
		 * 获取当前订单信息
		 */
		getOrderData() {
			let options = this.options;
			// 获取订单信息回调方法
			let callback = result => {
				// #ifdef H5
				// #endif
				// 请求错误
				const resData = result.data;
				if (result.code != 200) {
					Tools.showError(result.msg);
					return false;
				}
				// 显示错误信息
				if (resData.has_error) {
					Tools.showError(resData.error_msg);
				}
				let data = {};
				// 当前选择的配送方式
				data.curDelivery = resData.delivery;
				// 如果只有一种配送方式则不显示选项卡
				data.isShowTab = resData.setting.delivery.length > 1;
				// 上门自提联系信息
				if (this.linkman === '') {
					data.linkman = resData.last_extract.linkman;
				}
				if (this.phone === '') {
					data.phone = resData.last_extract.phone;
				}
				// 设置页面数据
				const res = Object.assign({}, resData, data);
				// _this.setData(Object.assign({}, resData, data));
				this.address = res.address || {};
				this.goods_list = res.goods_list;
				this.order_total_num = res.order_total_num;
				this.order_total_price = res.order_total_price;
				this.coupon_money = res.coupon_money;
				this.coupon_list = res.coupon_list;
				this.is_allow_points = res.is_allow_points;
				this.setting = res.setting;
				this.points_money = res.points_money;
				this.intra_region = res.intra_region;
				this.express_price = res.express_price;
				this.order_pay_price = res.order_pay_price;
				this.extract_shop = res.extract_shop;
				this.coupon_id = res.coupon_id;
				this.exist_address = res.exist_address;
			};
			// 请求的参数
			let params = {
				delivery: this.curDelivery || 0,
				shop_id: this.selectedShopId || 0
			};

			this.$u.api
				.getPointsGoodsCheckout(
					Object.assign({}, params, {
						goods_id: options.goods_id,
						goods_num: options.goods_num,
						goods_sku_id: options.goods_sku_id
					})
				)
				.then(res => {
					callback(res);
				});
		},

		/**
		 * 表单验证
		 */
		onVerify() {
			if (this.has_error) {
				Tools.showError(this.error_msg);
				return false;
			}
			return true;
		},
		/**
		 * 跳转到订单
		 */
		redirectToOrderIndex() {
			let path = '/pageShop/order/index';
			if (this.options.order_type === 'bargain') {
				path = '/pageShop/bargain/index/index?tab=1';
			}
			this.redirectTo({
				url: path
			});
		},
		/**
		 * 订单提交
		 */
		onSubmitOrder() {
			let options = this.options;

			if (this.disabled) {
				return false;
			}

			// 表单验证
			if (!this.onVerify()) {
				return false;
			}

			// 按钮禁用, 防止二次提交
			this.disabled = true;



			// 表单提交的数据
			let postData = {
				delivery: this.curDelivery,
				shop_id: this.selectedShopId || 0
			};

			postData = Object.assign(postData, {
				goods_id: options.goods_id,
				goods_num: options.goods_num,
				goods_sku_id: options.goods_sku_id
			});
			this.$u.api
				.postPointsGoodsCheckout(postData)
				.then(res => {
					this.redirectTo({
						url: '/pageShop/points/order?order_id=' + res.data.order_id
					});
				})
				.catch(e => {
					this.disabled = false;
				});
		}
	}
};
</script>

<style lang="scss">
/* 选项卡 */

.swiper-tab {
	width: 100%;
	text-align: center;
	height: 85rpx;
	background-color: #fff;
	border-bottom: 1px solid rgb(248, 248, 248);
}

.swiper-tab .swiper-tab-item {
	width: 35%;
	height: 100%;
	font-size: 28rpx;
	color: #777;
	display: flex;
	justify-content: center;
	align-items: center;
	box-sizing: border-box;
	border-bottom: 2px solid #ffffff00;
}

.swiper-tab .on {
	color: $theme-main-color;
	border-bottom: 2px solid $theme-main-color;
}

/* 配送信息 */

.flow-delivery {
	padding: 34rpx 30rpx;
	background: #fff
		url('')
		bottom left repeat-x;
	background-size: 120rpx auto;
}

.detail-content {
	padding: 0 20rpx;
}

.detail-content__title {
	margin-bottom: 6rpx;
}

.detail-content .detail-content__title-phone {
	margin-left: 10rpx;
}

.detail-content .detail-content__describe {
	font-size: 28rpx;
}

/* 买家留言 */

.flow-all-money .ipt-wrapper input {
	width: 100%;
	height: 75rpx;
}

/* 商品列表 */

.checkout_list {
	padding: 20rpx 30rpx 4rpx 30rpx;
	background: #fff;
	border-bottom: 1rpx solid rgb(248, 248, 248);
}

.checkout_list .flow-shopList {
	padding: 5rpx 0 10rpx;
	border-bottom: 1rpx solid rgb(248, 248, 248);
}

.checkout_list .flow-shopList:last-child {
	border-bottom: 0;
}

.flow-header-left {
	padding-left: 90rpx;
}

/* 会员价 */

.flow-shopList .flow-list-right .flow-cont.price-delete {
	font-size: 26rpx;
	color: #777;
	text-decoration: line-through;
}

.flow-shopList .grade-price {
	padding-top: 8rpx;
	font-size: 28rpx;
	color: #ff495e;
	text-align: right;
}

/* 优惠券选择 */

.popup__coupon {
	width: 750rpx;
	background: #fff;
	box-sizing: border-box;
	padding: 30rpx;
}

.popup__coupon .coupon__do_not .control {
	width: 90%;
	height: 72rpx;
	margin-bottom: 24rpx;
	color: #888;
	border: 1rpx solid #e3e3e3;
	border-radius: 10rpx;
}

.popup__coupon .coupon__title {
	text-align: center;
	margin-bottom: 30rpx;
}

.popup__coupon .coupon-list .coupon-item {
	position: relative;
	overflow: hidden;
	margin-bottom: 22rpx;
}

.popup__coupon .coupon-list .coupon-item .item-wrapper {
	display: flex;
	background: #fff;
	border-radius: 8rpx;
	color: #fff;
	height: 170rpx;
	overflow: hidden;
}

.popup__coupon .coupon-list .coupon-item .item-wrapper .coupon-type {
	position: absolute;
	top: 0;
	right: 0;
	z-index: 10;
	width: 128rpx;
	padding: 3px 0;
	background: #a771ff;
	font-size: 20rpx;
	text-align: center;
	color: #fff;
	transform: rotate(45deg);
	transform-origin: 64rpx 64rpx;
}

.popup__coupon .coupon-list .coupon-item .item-wrapper.color__blue {
	background: linear-gradient(-125deg, #57bdbf, #2f9de2);
}

.popup__coupon .coupon-list .coupon-item .item-wrapper.color__red {
	background: linear-gradient(-128deg, #ff6d6d, #ff3636);
}

.popup__coupon .coupon-list .coupon-item .item-wrapper.color__violet {
	background: linear-gradient(-113deg, #ef86ff, #b66ff5);
}

.popup__coupon .coupon-list .coupon-item .item-wrapper.color__violet .coupon-type {
	background: #55b5ff;
}

.popup__coupon .coupon-list .coupon-item .item-wrapper.color__yellow {
	background: linear-gradient(-141deg, #f7d059, #fdb054);
}

.popup__coupon .coupon-list .coupon-item .item-wrapper .tip {
	position: relative;
	flex: 0 0 32%;
	text-align: center;
	border-radius: 8px 0 0 8px;
}

.popup__coupon .coupon-list .coupon-item .item-wrapper .tip .money {
	font-weight: bold;
	font-size: 46rpx;
}

.popup__coupon .coupon-list .coupon-item .item-wrapper .tip .pay-line {
	font-size: 22rpx;
}

.popup__coupon .coupon-list .coupon-item .item-wrapper .split-line {
	position: relative;
	flex: 0 0 0;
	border-left: 4rpx solid #fff;
	margin: 0 5px 0 3px;
	background: #fff;
}

.popup__coupon .coupon-list .coupon-item .item-wrapper .split-line:before,
.popup__coupon .coupon-list .coupon-item .item-wrapper .split-line:after {
	content: '';
	position: absolute;
	width: 12px;
	height: 6px;
	background: #fff;
	left: -7px;
	z-index: 1;
}

.popup__coupon .coupon-list .coupon-item .item-wrapper .split-line:before {
	border-radius: 0 0 8px 8px;
	top: 0;
}

.popup__coupon .coupon-list .coupon-item .item-wrapper .split-line:after {
	border-radius: 8px 8px 0 0;
	bottom: 0;
}

.popup__coupon .coupon-list .coupon-item .item-wrapper .content {
	flex: 1;
	padding: 30rpx 20rpx;
	border-radius: 8px 0 0 8px;
}

.popup__coupon .coupon-list .coupon-item .item-wrapper .content .title {
	font-size: 34rpx;
}

.popup__coupon .coupon-list .coupon-item .item-wrapper .content .bottom .time {
	font-size: 24rpx;
	line-height: 24rpx;
}

.popup__coupon .coupon-list .coupon-item .item-wrapper .content .bottom .state {
	height: 46rpx;
	width: 122rpx;
	line-height: 92rpx;
	text-align: center;
	color: #fff;
	font-size: 26rpx;
}

/* 积分抵扣 */

.points .title {
	margin-right: 5rpx;
}

.points .icon-help {
	font-size: 28rpx;
}

.points .points-money {
	margin-right: 20rpx;
}

/* 支付方式 */

.pay-method .pay-item {
	padding: 20rpx 0;
	font-size: 28rpx;
	border-bottom: 1rpx solid rgb(248, 248, 248);
}

.pay-method .pay-item .item-left_icon {
	margin-right: 20rpx;
	font-size: 32rpx;
}

.pay-method .pay-item .item-left_icon.wechat {
	color: #00c800;
}

.pay-method .pay-item .item-left_icon.balance {
	color: #ff9700;
}
.pay-method .pay-item .item-left_icon.alipay {
	color: #0093e2;
}

/* 门店自提联系人 */

.flow-extract-contact {
	font-size: 28rpx;
	color: #444;
}

.flow-extract-contact .contact-item {
	padding: 10rpx 0;
	border-bottom: 1rpx solid rgb(248, 248, 248);
}

.flow-extract-contact .contact-item:last-child {
	border-bottom: none;
}

.flow-extract-contact .item_label {
	margin-right: 26rpx;
	width: 150rpx;
}

.flow-extract-contact .item_ipt input {
	font-size: 28rpx;
	width: 100%;
}

.flow-extract-contact .item_ipt .input-placeholder {
	font-size: 28rpx;
}
</style>
